<script>
  import $ from '../dfish.js'
  import {
    h
  } from 'vue'
  import WidgetBase from './WidgetBase.vue'
  import Img from './Img.vue'
  import Menu from './Menu.vue'

  export default {
    name: 'w-button',
    pubParentName: 'w-buttonbar',
    mixins: [WidgetBase],
    props: ['text', 'icon', 'focusIcon', 'face', 'target', 'closable', 'loading', 'disabled', 'vertical', 'dropClass', 'dropPosition', 'dropHover', 'dropIcon'],
    inject: ['providePubParent'],
    emits: ['click:close'],
    data() {
      return {
        dropper: null,
        showDrop: false,
        mouses: {
          onmouseenter: e => {e.currentTarget.classList.add('z-hv'); this.x.dropHover && this.drop()},
          onmouseleave: e => e.currentTarget.classList.remove('z-hv'),
          onmousedown: e => e.currentTarget.classList.add('z-down'),
          onmouseup: e => e.currentTarget.classList.remove('z-down'),
        }
      }
    },
    watch: {
      disabled(a) {
        a && $.q('.z-hv', this.el()).removeClass('z-hv')
      }
    },
    methods: {
      ajaxLock(a) {
        a = a == null ? true : a
        this.x.loading = a
      },
      drop() {
        this.showDrop = true
      },
      onclick(e) {
        if (this.isMore) {
          this.drop()
        } else {
          this.trigger(e)
        }
      },
      clickClose(e) {
        e.stopPropagation()
        e.runType = 'click:close'
        this.trigger(e)
      },
      clickDrop(e) {
        if (this.isDisabled) return
        e.stopPropagation()
        this.drop()
      },
      html_drop() {
        return 
      },
      html_slots() {
        let t = this.x.text
        let r = []
        if (this.x.loading) {
          r.push(h('div', {
            class: 'w-button-loading f-abs-full f-flex-center'
          }, h(Img, {
            src: '#f-svg-loading'
          })))
        }
        if (this.x.icon) {
          r.push(this.html_icon(this.x.focusIcon && this.isCurrent ? this.x.focusIcon : this.x.icon,
            'w-button-icon f-flex-center f-height'))
        }
        if (t) {
          r.push(h('div', {
            class: 'w-button-text'
          }, t))
        }
        if (this.isMore) {
          r.push(h(Img, {
            class: 'w-button-more f-flex-center f-height',
            src: this.x.dropIcon || '.f-i .f-i-caret-down'
          }))
        }
        if (this.x.closable) {
          r.push(h('div', {
            class: 'w-button-close f-flex-center'
          }, h('i', {
            class: 'w-button-close-icon f-i f-i-close',
            onclick: this.clickClose,
          })))
        }
        return [
          h('div', {
            class: 'w-button-main f-oh f-height',
            ...(this.isCombo && !this.isDisabled && this.mouses),
          }, r),
          this.isCombo && h(Img, {
            class: 'w-button-drop f-flex-center f-height',
            src: this.x.dropIcon || '.f-i .f-i-caret-down',
            ...(!this.isDisabled && this.mouses),
            onclick: this.clickDrop
          }),
          this.showDrop ? h(Menu, {
            context: this,
            ownproperty: true,
            minWidth: $.bcr(this.el()).width,
            autoHide: true,
            dropHover: this.x.dropHover,
            dropClass: this.x.dropClass,
            dropPosition: this.x.dropPosition,
            snap: {
              target: () => this.el(),
              position: this.x.dropPosition || 'v',
              indent: 1
            },
            on: {
              close: () => this.showDrop = false
            }
          }, this.$slots) : []
        ]
      }
    },
    computed: {
      tagName() {
        return 'button'
      },
      isCurrent() {
        return this.pubParent && this.pubParent.inCurrent(this)
      },
      isMore() {
        return !!this.$slots.default && !this.getOn('click')
      },
      isCombo() {
        return !!(this.$slots.default && this.getOn('click'))
      },
      isDisabled() {
        return this.x.disabled || this.x.loading
      },
      html_props() {
        return {
          disabled: this.isDisabled,
          class: {
            [`z-face-${this.x.face}`]: this.x.face,
            'z-combo': this.isCombo,
              'z-more': this.isMore,
              'z-on': this.isCurrent,
              'z-ds': this.x.disabled,
              'z-loading': this.x.loading,
              'z-vertical': this.x.vertical,
              'z-closable': this.x.closable
          },
          onclick: this.onclick,
          ...(!this.isCombo && this.mouses),
        }
      }
    }
  }
</script>

<style>

</style>
